<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">
		<view class="con">
			<back></back>
			<!-- <view :class="theme?'colorfff':''" class="size30 ">实时成交</view> -->
			<view class="flex-ju-a size24 mt30">
				<view>今日最高价：{{listdata.today_max}}</view>
				<view>今日最低价：{{listdata.today_min}}</view>
				<view>今日总量：{{listdata.today_count}}</view>
			</view>
			<!-- <l-echart class="line-chart" ref="lineChart"></l-echart>
				<view class="flex-ju-a size24 ">
					<view @click="atbzhong(1)" :class="{active:tindex==1}" class="tpoy wh100-50 bg999 colorfff flex-ju-c ra50">5分</view>
					<view @click="atbzhong(2)" :class="{active:tindex==2}" class="tpoy wh100-50 bg999 colorfff flex-ju-c ra50">1小时</view>
					<view @click="atbzhong(3)" :class="{active:tindex==3}" class="tpoy wh100-50 bg999 colorfff flex-ju-c ra50">1天</view>
				</view> -->
			<view v-if="isdata" class="flex-ju-c mt8vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class=" size26 mt30 ra15">
				<view v-for="(item,index) in list" :key="index" class="pg20-30 ">
					<view class="flex-ju-b color333 pb30 border-bccc">
						<view :class="theme?'colorfff':''">#{{hao(item.nftId)}}</view>
						<view>
							<view :class="theme?'colorfff':''" class="text-right">¥ {{item.money_price}}</view>
							<view class="color999 mt5 ">{{item.complete_at}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import * as echarts from 'echarts/core';
	// import {
	// 	LineChart
	// } from 'echarts/charts';
	// import {
	// 	TooltipComponent,
	// 	GridComponent,
	// } from 'echarts/components';
	// import {
	// 	CanvasRenderer
	// } from 'echarts/renderers';
	// echarts.use([
	// 	TooltipComponent,
	// 	GridComponent,
	// 	LineChart,
	// 	CanvasRenderer
	// ]);
	export default {
		data() {
			return {
				tindex:1,
				theme: uni.getStorageSync('theme'),
				isdata: false,
				info: {},
				page: 1,
				list: [],
				qx:[],
				type:1,
				listdata:{}
			}
		},
		onLoad(option) {
			this.info = option
			this.getList()
		},
		mounted() {
			//加载折线图数据
		},
		onReachBottom() {
			if (this.list.length == this.page * 20) {
				this.page++
				this.getList()
			}
		},
		methods: {
			atbzhong(index){
				this.tindex = index
				this.type=index
				this.getList()
			},
			getList() {
				this.http('market/resalesLog', {
					product_id: this.info.id,
					type:this.type
				}).then(res => {
					this.list = res.data.list
					
					this.qx = res.data.qx
					this.listdata = res.data
					// this.loadLineData();
					if (this.list.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
				})
			},
			loadLineData() {
				//这里请求服务器拿到数据
				var xx = []
				var yy = []
				
				this.qx.map(item=>{
					xx.push(item.time)
					yy.push(item.count)
				})
				var xxm = []
				if(this.type==1||this.type==2){
					xxm = xx.slice(0,6)
				}else{
					xxm = xx.slice(0,3)
				}
				let res = {
					//x轴数据
					xData: xxm,
					//y轴数据
					yData:yy
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b} \n 数据: {c}'
					},
					//设置曲线的颜色
					color: ['#4e9d77'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
					}]
				};
			
				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			},
		}
	}
</script>

<style>
.tpoy{
	
}
.active{
	background:#000;
}
</style>